<template>
<div>
  <Form ref="from"  :model="form" :label-width="70">
    <FormItem label="账号" >
      <Input v-model="form.username" style="width: 350px" placeholder="请输入账号"></Input>
    </FormItem>
    <FormItem label="姓名" >
      <Input v-model="form.name" style="width: 350px" placeholder="请输入姓名"></Input>
    </FormItem>
<!--    <FormItem label="密码" >
      <Input v-model="form.password" style="width: 350px" placeholder="请输入密码"></Input>
    </FormItem>-->
    <FormItem label="邮箱" >
      <Input v-model="form.email" style="width: 350px" placeholder="请输入邮箱"></Input>
    </FormItem>
    <FormItem label="地址" >
      <Input v-model="form.address" style="width: 350px" placeholder="请输入地址"></Input>
    </FormItem>
    <FormItem label="性别" >
      <Select v-model="form.sex">
        <Option v-for="item in cityList" :value="item.value" v-model="item.value" :key="item.value">{{ item.name }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="出生日期" size="mini" >
      <DatePicker v-model="form.birthday"  type="date" placeholder="请选择日期"
                  style="width: 200px"></DatePicker>
    </FormItem>
    <FormItem label="电话" >
      <Input v-model="form.tel" style="width: 350px" placeholder="请输入电话"></Input>
    </FormItem>
    <FormItem label="用户类型" style="width: 200px;" >
      <Select v-model="form.type">
        <Option v-for="item in typeList" :value="item.value" v-model="item.value" :key="item.value">{{ item.name }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="用户状态" style="width: 200px;">
      <Select v-model="form.state">
        <Option v-for="item in stateList" :value="item.value" v-model="item.value" :key="item.value">{{ item.name }}
        </Option>
      </Select>
    </FormItem>
    <form-item>
      <Button type="primary" @click="update">提交</Button>
      <Button type="text" @click="remove">取消</Button>
    </form-item>
  </Form>
</div>
</template>

<script>
import axios from "axios";

export default {
name: "demo02",
  //获取父组件传过来的值
  props:['data'],
  data(){
    return{
      form: {
        name: null,
        email: null,
        address: null,
        tel: null,
        username: null,
        birthday: null,
        type: null,
        sex: null,
        state:null,
      },
      cityList: [
        {
          name: '男',
          value: '男',
        },
        {
          name: '女',
          value: '女'
        }
      ],
      typeList: [
        {
          name: '管理员',
          value: '管理员'
        },
        {
          name: '读者',
          value: '读者'
        }
      ],
      stateList: [
        {
          name: '正常',
          value: '正常'
        },
        {
          name: '异常',
          value: '异常'
        }
      ],
    }
  },
  methods:{
    update(){
      this.http.post("update",this.form).then(res=>{
          if (res.data){
            this.$emit('hideDialog')
            this.$emit('after')
            this.$Message.success('修改成功')
          }else {
            this.$Message.error('修改失败')
          }
        })
    },
    remove(){
        this.$emit('hideDialog')
    }
  },
  created() {
    this.form=this.data
  }
}
</script>

<style scoped>

</style>
